import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { observer, inject } from 'mobx-react'
import './Article.scss'

@inject('articleStore')
@observer
class Article extends Component {
  static propTypes = {
    articleStore: PropTypes.object.isRequired,
    match: PropTypes.object.isRequired,
  };

  componentDidMount() {
    const { match } = this.props
    const id = match.params.id

    this.props.articleStore.getInfo(id)
    stat({
      category: '文章页面',
      action: '文章页面pv',
      label: id,
    })
  }

  createMarkup = () => {
    const { info } = this.props.articleStore
    return {
      __html: info.content,
    }
  };

  render() {
    const { info } = this.props.articleStore

    /* eslint-disable react/no-danger */
    return (
      <div styleName="container">
        <div styleName="title">
          {info.title}
        </div>
        <div
          className="ql-editor"
          dangerouslySetInnerHTML={this.createMarkup()}
        />
      </div>
    )
  }
}

export default Article
